<template>
  <!-- 输出数据源 -->
  <div class="app-container flex">
    <div class="tabs">
      <tabList :data="tabs" @handleClick="handleClick"/>
    </div>
    <div class="container">
      <syslog v-if="tabIndex==0"></syslog>
      <Kafka v-if="tabIndex==1"></Kafka>
      <Jdbc v-if="tabIndex==2"></Jdbc>

    </div>
  </div>
</template>

<script>
import syslog from '@/components/accessProduct/repositoryPage/Syslog'
import Kafka from '@/components/accessProduct/repositoryPage/Kafka'
import Jdbc from '@/components/accessProduct/repositoryPage/Jdbc'
import tabList from '@/components/accessProduct/repositoryPage/tabList'

export default {
  name: 'repositionPage',
  components: { syslog, Kafka,Jdbc,tabList },
  data() {
    return {
      tabIndex: 0,
      tabs: [{
        title: '内容索引',
        value: 3,
        img:'sjjr_jrsjy_01.png'
      }, {
        title: '消息队列',
        value: 4,
        img:'sjjr_jrsjy_02.png'
      }, {
        title: '数据库',
        value: 4,
        img:'sjjr_jrsjy_03.png'
      }]

    }
  },
  created() {
  },
  methods: {
    handleClick(index) {
      this.tabIndex = index
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin flex {
  display: flex;
  justify-content: center;
}

//重定义样式
.app-container {
  &.flex {
    padding: 0;
    @include flex;
height: 100%;
    overflow: hidden;
    background: #eef0f5;
  }

  .container {
    background: #fff;
    width: calc(84% - 10px);
    height: 100%;
  }
}


</style>
